<template>
  <view class="payment-record-container">
    <!-- 页面头部 -->
    <view class="header" :style="currentGradient">
      <text class="title">缴费记录</text>
    </view>

    <!-- 记录列表 -->
    <scroll-view
      class="record-list"
      scroll-y
      @scrolltolower="loadMore"
      :style="{ height: scrollHeight + 'px' }"
    >
      <view
        class="record-card card"
        v-for="(item, index) in paymentList"
        :key="index"
      >
        <view class="card-header">
          <view class="header-content">
            <text class="course-type">{{
              getCourseTypeText(item.courseType)
            }}</text>
            <text class="record-date">{{ formatDate(item.createTime) }}</text>
          </view>
        </view>

        <view class="card-content">
          <view class="info-section">
            <view class="info-row">
              <uni-icons type="compose" size="16" color="#666"></uni-icons>
              <text class="detail-text"
                >课时: {{ item.courseUnit }} 分钟/课</text
              >
            </view>
            <view class="info-row">
              <uni-icons type="payment" size="16" color="#666"></uni-icons>
              <text class="detail-text">单价: ¥{{ item.priceUnit }}</text>
            </view>
            <view class="info-row">
              <uni-icons type="compose" size="16" color="#666"></uni-icons>
              <text class="detail-text">课时数: {{ item.count }}</text>
            </view>
            <view class="info-row">
              <uni-icons type="clock" size="16" color="#666"></uni-icons>
              <text class="detail-text"
                >总时长: {{ item.totalMinutes }}分钟</text
              >
            </view>
          </view>

          <view class="amount-section">
            <view class="amount-row">
              <view class="amount-item">
                <text class="label">应收:</text>
                <text class="value">¥{{ item.totalAmount }}</text>
              </view>
              <view class="amount-item">
                <text class="label">实收:</text>
                <text class="value real-amount">¥{{ item.realAmount }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-status">
        <text v-if="loading">加载中...</text>
        <text v-else-if="finished">没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { getPaymentList } from "@/api/account";
import { getCurrentTheme } from "@/utils/theme";

interface PaymentRecord {
  courseType: string;
  courseUnit: number;
  priceUnit: number;
  count: number;
  totalMinutes: number;
  totalAmount: number;
  realAmount: number;
  createTime: number; // 实际是时间戳
}

const paymentList = ref<PaymentRecord[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const finished = ref(false);
const scrollHeight = ref(0);
const total = ref(0);

// 获取当前主题
const currentTheme = computed(() => getCurrentTheme());

// 计算当前主题的渐变样式
const currentGradient = computed(() => {
  return `background: linear-gradient(135deg, ${currentTheme.value.start} 0%, ${currentTheme.value.end} 100%);`;
});

// 获取支付记录数据
const fetchPaymentRecords = async () => {
  if (loading.value || finished.value) return;

  loading.value = true;

  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
    };

    const res = await getPaymentList(params);

    // 修改判断条件，code为0表示成功
    if (res.code === 0) {
      // 修改数据源路径，从res.data.list获取数据
      if (currentPage.value === 1) {
        paymentList.value = res.data.list || [];
      } else {
        paymentList.value = [...paymentList.value, ...(res.data.list || [])];
      }

      // 修改总数路径，从res.data.total获取
      total.value = res.data.total;

      // 检查是否已加载全部数据
      finished.value = paymentList.value.length >= total.value;
      currentPage.value++;
    }
  } catch (error) {
    console.error("获取支付记录失败:", error);
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 加载更多数据
const loadMore = () => {
  fetchPaymentRecords();
};

// 计算滚动区域高度
onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      scrollHeight.value = res.windowHeight - 100;
    },
  });

  // 初始化数据
  fetchPaymentRecords();
});

// 格式化日期显示
const formatDate = (timestamp: number) => {
  if (!timestamp) return "";

  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");

  return `${year}-${month}-${day}`;
};

// 课程类型转换
const getCourseTypeText = (courseType: string) => {
  const courseTypes: Record<string, string> = {
    "1": "基础课程",
    "2": "进阶课程",
    // 可根据实际业务需求添加更多类型
  };
  return courseTypes[courseType] || "未知课程";
};
</script>

<style scoped lang="scss">
.payment-record-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: white;
  }
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-card {
  padding: 0;
  background: $background-color;
  border-radius: 16rpx;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .card-header {
    padding: 25rpx;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1rpx solid #eee;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;

      .course-type {
        font-weight: 600;
        color: #333;
        font-size: 32rpx;
        flex: 1;
      }

      .record-date {
        color: #666;
        font-size: 26rpx;
        background: rgba(0, 0, 0, 0.05);
        padding: 5rpx 15rpx;
        border-radius: 20rpx;
      }
    }
  }

  .card-content {
    padding: 25rpx;

    .info-section {
      padding-bottom: 20rpx;
      border-bottom: 1rpx dashed #eee;
    }

    .info-row {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      padding: 10rpx 0;

      &:last-child {
        margin-bottom: 0;
      }

      uni-icons {
        margin-right: 15rpx;
        width: 32rpx;
        text-align: center;
      }

      .detail-text {
        color: #555;
        font-size: 26rpx;
        flex: 1;
      }
    }

    .amount-section {
      margin-top: 20rpx;

      .amount-row {
        display: flex;
        justify-content: space-between;

        .amount-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;

          .label {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 5rpx;
          }

          .value {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
          }

          .real-amount {
            color: #ff6600;
            font-weight: 600;
          }
        }
      }
    }
  }
}

.loading-status {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 26rpx;

  text {
    padding: 15rpx 30rpx;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 30rpx;
  }
}

// 响应式优化
@media screen and (max-width: 350px) {
  .record-card {
    .card-header {
      padding: 20rpx 15rpx;

      .header-content {
        .course-type {
          font-size: 28rpx;
        }
      }
    }

    .card-content {
      padding: 20rpx 15rpx;

      .info-row {
        .detail-text {
          font-size: 24rpx;
        }
      }

      .amount-section {
        .amount-row {
          .amount-item {
            .label {
              font-size: 22rpx;
            }

            .value {
              font-size: 26rpx;
            }
          }
        }
      }
    }
  }
}
</style>
